<template>
    <div class="Register">
        <div class="border">
            <div class="title_reg">
                <span>用户注册</span>
            </div>
            <div class="reg">
                <div class="input">
                    <input type="text" placeholder="用户名 (5-8位字母或数字或下划线)" @blur="formatUsername" v-model="username"/>
                    <div class="tip">{{err.username}}</div>
                </div>
                <div class="input">
                    <input type="password" placeholder="密码 (5-11位字母或数字或下划线)" @blur="formatPassword" v-model="password"/>
                    <div class="tip">{{err.password}}</div>
                </div>
                <div class="radio">
                    <span>性别:</span>
                    <input type="radio" value="1" v-model="sex"/>
                    <label>男</label>
                    <input type="radio" value="0" v-model="sex"/>
                    <label>女</label>
                </div>
                <div class="input">
                    <input type="tel" maxlength="11" placeholder="手机号" @blur="formatPhoneNum" v-model="phoneNum"/>
                    <div class="tip">{{err.phoneNum}}</div>
                </div>
                <div class="input">
                    <input type="text" placeholder="邮箱" @blur="formatEmail"  v-model="email"/>
                    <div class="tip">{{err.email}}</div>
                </div>
                <div class="submit">
                    <input type="submit" value="提交" @click="submit"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import { $Register, $checkUsername } from '../api/config'

  export default {
    name: 'Register',
    data: function () {
      return {
        username: '',
        password: '',
        phoneNum: '',
        email: '',
        sex: 1,
        err:{
          username:"",
          password:"",
          phoneNum:"",
          email:"",
        }
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      submit () {
        if (this.username != '' && this.password != '' && this.phoneNum != '') {
          for(let key in this.err){
            if(this.err[key]!=""){
              this.$toast("请修改后再提交")
              return
            }
          }
          let param = {
            username: this.username, password: this.password,
            phoneNum: this.phoneNum, email: this.email, sex: this.sex
          }
          this.$loading()
          this.$ajax.post('/register', param).then(({data})=>{
            this.$loaded()
            if(data.success){
                this.$router.push("/")
            }else{
              this.$toast(data.errMsg)
            }
          })
        }else{
          this.$toast("请填写完整")
        }
      },
      formatUsername(){
        this.err.username=""
        if(this.err.username!="已存在"){
          if (!/^\w{5,8}$/.test(this.username)&&this.username!="") {
            this.err.username = "格式不符"
          }
        }
      },
      formatPassword(){
        this.err.password=""
         if (!/^\w{5,11}/.test(this.password)&&this.password!=""){
           this.err.password="格式不符"
         }
      },
      formatEmail(){
        this.err.email=""
        if (!/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(this.email)&&this.email!=""){
          this.err.email="邮箱格式不正确"
        }
      },
      formatPhoneNum(){
        this.err.phoneNum=""
        if(!/0?(13|14|15|17|18|19)[0-9]{9}/.test(this.phoneNum)&&this.phoneNum!=""){
          this.err.phoneNum="手机号有误"
        }
      }
    },
    watch: {
      username: function (val) {
        if (!/^\w{5,8}$/.test(val)) {
          return
        }
        $checkUsername({Username: val}).then(({data}) => {
          this.err.username = ''
          if (data.canUse == false) {
            this.err.username = '已存在'
          }
        }).catch(function (err) {
          console.log(err)
        })
      }
    }
  }
</script>
<style>
    .Register {
        box-sizing: border-box;
        text-align: center;
        height: 100%;
        padding: 2rem;
    }

    .border {
        width: 13rem;
        margin: 0 auto;
        padding: 1rem;
        background: #f0ffff33;
        border-radius: 1rem;

    }

    .title_reg {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .input input {
        width: 11rem;
        padding: 0.5rem;
        border: 0.05rem skyblue solid;
        border-radius: 0.2rem;
        outline: none;
        margin: 0.4rem;
        font-size: 0.6rem;
    }

    .input {
        position: relative;
        height: 2.8rem;
    }

    .tip {
        position: absolute;
        font-size: 0.1rem;
        color: red;
        top: 0.9rem;
        right: 0.7rem;
    }

    .radio span {
        font-size: 0.5rem;
    }

    .radio label {
        font-size: 0.5rem;
    }

    .radio input {
        margin-left: 1rem;
        margin-top: 0.25rem;
    }

    .radio {
        margin: 0.4rem 0.7rem;
        display: flex;
        line-height: 1rem;
        height: 1rem;
    }

    .submit input {
        width: 10rem;
        height: 1.3rem;
        color: white;
        border: none;
        background: #1ba092;
        outline: none;
        margin: 0.7rem;
    }
</style>
